<template>

    <div id="login-main">
        <el-form ref="loginFormRef" :model="data.form" :rules="data.form_rules" @submit.native.prevent label-width="0" class="login-form">
            <p class="title text-white">系统登录</p>
            <el-form-item prop="username">
                <el-input size="large" v-model="data.form.username" placeholder="请输入用户名"
                    prefix-icon="UserFilled"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input size="large" v-model="data.form.password" placeholder="请输入密码" prefix-icon="Lock"
                    :show-password="true">
                </el-input>
            </el-form-item>
            <div class="login-btn">
                <el-button type="primary" native-type="submit" @click="login">登录</el-button>
            </div>
        </el-form>
    </div>

</template>

<script>
import sha1 from "js-sha1"
import { reactive, ref, onBeforeUnmount, getCurrentInstance } from 'vue';

import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default {
    props: {},
    setup(props) {
        const instance = getCurrentInstance();
        // 获取实例上下文
        const { proxy } = getCurrentInstance();


        // store
        const store = useStore();
        // router
        const router = useRouter();

        const data = reactive({
            form: {
                // 用户名
                username: "",
                // 密码
                password: ""
            },
            form_rules: {
                username: [
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    },
                    {
                        min: 6,
                        message: '密码至少6个字符',
                        trigger: 'blur'
                    }
                ]
            },
        })

        const login = () => {
            proxy.$refs.loginFormRef.validate((valid) => {
                if (!valid) {
                    return;
                }
                const requestData = {
                    username: data.form.username,
                    password: sha1(data.form.password)
                }
                store.dispatch("user/loginAction", requestData).then(response => {
                    proxy.$message({
                        message: response.msg,
                        type: "success"
                    })
                    //路由跳转
                    // router.push({ path: "/home" });
                    // console.log("path：",response.data.path)
                    window.sessionStorage.setItem("firstPath" , response.data.path)
                    window.sessionStorage.setItem("firstName" , response.data.name)
                    router.push({ path: response.data.path });
                }).catch(error => {
                    console.log("失败");
                })
            })
        }


        return {
            // store,
            // router,
            data,
            login
        }
    }

}

</script>

<!-- scoped：css样式私有化，不对全局造成污染，只对当前组件生效 -->
<style lang="scss" scoped>
#login-main {
    height: 100vh;
    width: 100%;
    background-color: #2d3a4b;
}

.login-form {
    width: 520px;
    padding-top: 300px;
    margin: 0 auto;
    // background-color: red;

    .title {
        font-size: 26px;
        text-align: center;
        padding-bottom: 30px;
    }

    .el-form-item {
        margin: 0 auto;
        margin-bottom: 30px;
        width: 350px;

        ::v-deep .el-input__wrapper {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 20px;
            box-shadow: 0 0 0 2px #3e4957;
        }

        ::v-deep .el-input__wrapper.is-focus {
            box-shadow: 0 0 0 2px #409eff;
        }
    }
}

.login-btn {
    text-align: center;

    button {
        width: 68%;
        border-radius: 20px;
    }
}
</style>